<template>
  <el-dialog
    title="录音质检"
    :visible.sync="recordingShow"
    :destroy-on-close="true"
    :append-to-body="true"
    width="80%"
    @close="handleClose"
    class="edit-main"
  >
    <el-form
      ref="formData"
      :rules="rules"
      label-width="180px"
    >
      <el-row :gutter="20">
        <el-col :span="6">
          <audio
            style="width: 300px; height: 36px"
            ref="audioPlayer"
            :src="audioUrl"
            controls
          >
            您的浏览器不支持音频播放
          </audio>
        </el-col>
        <el-col :span="12">
          <el-form-item label="质检状态">
            <el-select
              v-model="qualityStatus"
              filterable
              style="width: 100%"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in qualityStatusList"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="客户信息"> </el-form-item>
        </el-col>
        <div></div>
        <el-col :span="12">
          <el-form-item label="客户姓名">
            <el-input
              type="input"
              style="width: 100%"
              placeholder="请输入内容"
              v-model="formData.customerName"
              show-word-limit
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户号码">
            <el-input
              type="input"
              style="width: 100%"
              placeholder="请输入内容"
              v-model="formData.customerTel"
              show-word-limit
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="品牌">
            <el-input
              type="input"
              style="width: 100%"
              placeholder="请输入内容"
              v-model="formData.brand"
              show-word-limit
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="车系">
            <el-input
              type="input"
              style="width: 100%"
              placeholder="请输入内容"
              v-model="formData.series"
              show-word-limit
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="省份">
            <el-input
              type="input"
              style="width: 100%"
              placeholder="请输入内容"
              v-model="formData.province"
              show-word-limit
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="城市">
            <el-input
              type="input"
              style="width: 100%"
              placeholder="请输入内容"
              v-model="formData.city"
              show-word-limit
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="具体区县">
            <el-input
              type="input"
              style="width: 100%"
              placeholder="请输入内容"
              v-model="formData.district"
              show-word-limit
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上牌时间">
            <el-date-picker
              style="width: 100%"
              v-model="formData.onBoardTime"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公里数">
            <el-input
              type="input"
              style="width: 100%"
              placeholder="请输入内容"
              v-model="formData.kilometers"
              show-word-limit
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否可以正常过户">
            <el-input
              type="input"
              style="width: 100%"
              placeholder="请输入内容"
              v-model="formData.isOwnership"
              show-word-limit
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆来源">
            <el-input
              type="input"
              style="width: 100%"
              placeholder="请输入内容"
              v-model="formData.carSource"
              show-word-limit
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预约时间（看车时间）">
            <el-date-picker
              style="width: 100%"
              v-model="formData.appointmentTime"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="录入日期">
            <el-date-picker
              style="width: 100%"
              disabled
              v-model="createTime"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工号">
            <el-input
              type="input"
              disabled
              style="width: 100%"
              placeholder="请输入内容"
              v-model="workNumber"
              show-word-limit
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="呼叫状态">
            <el-select
              v-model="callStatus"
              filterable
              disabled
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in callStatusList"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSubmit">提 交</el-button>
      <el-button @click="handleClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { updateQuality } from "@/api/dataManagement/callDetails.js";

export default {
  name: "recordingOldCarDialog",
  props: {
    recordingOldDialogShow: {
      type: Boolean,
      default: false,
    },
    currentInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      loading: false,
      tableData: [], //表格数据
      pagination: {
        pageNum: 1,
        pageSize: 10,
      },
      qualityStatus: "",
      createTime: "",
      workNumber: "",
      callStatus: "",
      qualityStatusList: [
        { dictValue: "未质检", dictLabel: "未质检" },
        { dictValue: "质检合格", dictLabel: "质检合格" },
        { dictValue: "质检不合格", dictLabel: "质检不合格" },
      ],
      callStatusList: [
        { dictValue: "已呼", dictLabel: "已呼" },
        { dictValue: "未呼", dictLabel: "未呼" },
      ], //呼叫状态
      formData: {},
      voiceTypeList: [],
      rules: {
        questionText: [
          { required: true, message: "内容不能为空", trigger: "blur" },
        ],
      },
      total: 0,
      recordingShow: false,
      detailData: null,
    };
  },

  computed: {
    audioUrl: function () {
      return this.currentInfo?.tapeUrl || "";
    },
  },

  watch: {
    recordingOldDialogShow: {
      handler(val) {
        this.recordingShow = val;
      },
      immediate: true,
    },
    "currentInfo.id": {
      handler(val) {
        if (val) {
          this.qualityStatus = this.currentInfo.qualityStatus;
          this.formData = this.replaceNullWithEmptyString(
            this.currentInfo?.ssscCustomerUserdcar
          );
          this.createTime =
            this.currentInfo?.ssscCustomerUserdcar?.createTime || "";
          this.workNumber =
            this.currentInfo?.ssscCustomerUserdcar?.workNumber || "";
          this.callStatus =
            this.currentInfo?.ssscCustomerUserdcar?.callStatus || "";
        }
      },
      immediate: true,
    },
  },
  methods: {
    replaceNullWithEmptyString(obj) {
      if (obj === null || obj === undefined) {
        return "";
      }
      if (Array.isArray(obj)) {
        return obj.map((item) => this.replaceNullWithEmptyString(item));
      }

      if (typeof obj === "object") {
        const newObj = {};
        for (const key in obj) {
          if (obj.hasOwnProperty(key)) {
            newObj[key] = this.replaceNullWithEmptyString(obj[key]);
          }
        }
        return newObj;
      }

      return obj;
    },
    // 保存
    async onSubmit() {
      const {
        businessType,
        id,
        qualityStatus,
        ssscCustomerNewcar,
        ssscCustomerUserdcar,
        tapeUrl,
      } = this.currentInfo;

      const ssscCustomerUserdcarData = {
        ...ssscCustomerUserdcar,
        ...this.formData,
      };
      const params = {
        businessType,
        id,
        qualityStatus: this.qualityStatus || qualityStatus,
        ssscCustomerNewcar,
        ssscCustomerUserdcar: ssscCustomerUserdcarData,
        tapeUrl,
      };
      const { code, msg } = await updateQuality(params);
      if (code === 200) {
        this.$message.success(msg);
        this.handleClose();
      }
    },

    handleClose() {
      this.recordingShow = false;
      this.$emit("onCloseRecordingOldCarDialog");
    },
  },
};
</script>

<style lang="scss" scoped>
.edit-main {
  ::v-deep .el-textarea__inner {
    height: 150px;
  }
}
</style>
